<script lang="ts">
  export default {
    name: 'KtForm',
    inheritAttrs: false,
  };
</script>
<script setup lang="ts">
  import {
    PropType, defineProps, onMounted, ref,
  } from 'vue';
  import FormItem from './FormItem';

  const props = defineProps({
    basicProps: {
      type: Object as PropType<KtForm.IFormProps>,
      required: true,
    },
  });

  const emits = defineEmits(['init-form']);

  const formRef = ref(null);
  onMounted(() => {
    emits('init-form', formRef.value);
  });
</script>

<template>
  <div v-bind="$attrs">
    <a-form
      ref="formRef"
      v-bind="basicProps"
      :model="basicProps.model"
      class="kt-form inline-block relative w-full"
    >
      <form-item
        v-for="(schema, index) of basicProps.schemas"
        :key="index"
        :form="basicProps.model"
        :schema="schema"
        :disabled="basicProps.disabled"
      />
    </a-form>
  </div>
</template>

<style lang='less'>
.kt-form {
  .ant-select {
    min-width: 100px;
  }

  .ant-input-number {
    width: 100% !important;
  }
}
</style>
